<template>
  <view class="red-envelope-page">
    <view class="tab-bar">
      <text class="tab-item" :class="{ active: activeTab === 'sendRecords' }" @click="changeTab('sendRecords')">发包记录</text>
      <text class="tab-item" :class="{ active: activeTab === 'grabRecords' }" @click="changeTab('grabRecords')">抢包记录</text>
    </view>

	<view class="record-item">
		<view>群主类型</view>
		<view>金额</view>
		<view>时间</view>
	</view>
    <view class="records-list">
      <view v-if="activeTab === 'sendRecords'" class="record-item" v-for="(record, index) in sendRecords" :key="index">
        <text>{{ record.groupType }}</text>
        <text>{{ record.amount }}</text>
        <text>{{ record.time }}</text>
      </view>

      <view v-else-if="activeTab === 'grabRecords'" class="record-item" v-for="(record, index) in grabRecords" :key="index">
        <text>{{ record.groupType }}</text>
        <text>{{ record.amount }}</text>
        <text>{{ record.time }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'sendRecords', // 默认选中的选项卡
      sendRecords: [
        { groupType: '群组A', amount: 10, time: '2023-11-01 10:00:00' },
        { groupType: '群组B', amount: 20, time: '2023-11-02 11:00:00' },
        // 可以添加更多发包记录
      ],
      grabRecords: [
        { groupType: '群组A', amount: 5, time: '2023-11-01 10:05:00' },
        { groupType: '群组B', amount: 15, time: '2023-11-02 11:05:00' },
        // 可以添加更多抢包记录
      ]
    };
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab;
    }
  }
};
</script>

<style scoped>
/* 样式可根据实际需求进行调整 */
.red-envelope-page {
  padding: 20px;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
}

.tab-item {
  padding: 10px;
  cursor: pointer;
}

.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

.records-list {
  margin-top: 20px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
</style>
